<template>
  <div class="notice-box">
    <span class="border-line top-border"></span>
    <span class="border-line left-border"></span>
    <span class="border-line right-border"></span>
    <span class="border-line bottom-border"></span>
    <div class="title">
      <img src="@/assets/home/notice-title@3x.png" />
    </div>
    <div class="list-box">
      <ul class="list-box-ul">
        <li class="list-box-item" v-for="(item, index) in homeStore.alarmInfoData" :key="index">
          <span class="text">
            <span class="cir"></span>
            <span class="title">{{ item.title }}</span>
          </span>
          <span :class="`notice-title color_${item.value === '流量超标' ? 2 : 1}`">{{ item.value }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { useHomeStore } from '@/Store/homeStore';


const homeStore = useHomeStore();


</script>

<style lang="scss" scoped>
.color_1 {
  color: rgba(255, 87, 51, 1) !important;
}
.color_2 {
  color: rgba(255, 195, 0, 1) !important;
}
.notice-box{
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(33, 100, 156, 0.5) 0%, rgba(29, 70, 143, 0.25) 100%);
  .border-line{
    position: absolute;
    &.top-border {
      background-color: rgba(255, 235, 59, 1);
      width: 100%;
      height: 4px;
      top: 0;
      left: 0;
    }
    &.bottom-border {
      background-color: rgba(29, 70, 143, 0.25);
      width: calc(100% - 8px);
      height: 4px;
      bottom: 0;
      left: 4px;
    }
    &.left-border {
      background: linear-gradient(180deg, rgba(255, 235, 59, 1) 0%, rgba(29, 70, 143, 0.25) 100%);
      width: 4px;
      height: 100%;
      top: 0;
      left: 0;
    }
    &.right-border {
      background: linear-gradient(180deg, rgba(255, 235, 59, 1) 0%, rgba(29, 70, 143, 0.25) 100%);
      width: 4px;
      height: 100%;
      top: 0;
      right: 0;
    }
  }
  > .title {
    width: 183px;
    height: 36px;
    margin: 0 auto;
    margin-top: 14px;
    margin-bottom: 16px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .list-box-ul{
    padding: 0;
    margin: 0;
    margin-left: 22px;
    margin-top: 16px;
    margin-bottom: 31px;
    .list-box-item{
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 5.6px;
      > .text {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
      }
      .cir {
        width: 5.17px;
        height: 4.4px;
        background: rgba(42, 255, 255, 1);
        border-radius: 50%;
        margin-right: 7.78px;
        
      }
      .title {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 17.38px;
        color: rgba(42, 255, 255, 1);
        text-align: left;
        vertical-align: top;
      }
      .notice-title {
        font-size: 12px;
        width: 77.5px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 17.38px;
        color: rgba(255, 195, 0, 1);
        text-align: left;
        vertical-align: top;
        justify-self: flex-end;
        margin-right: 2.5px;
      }
    }
  }
}
</style>